import React from 'react'
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import { RouteType } from '../../types';
import { useLocation, useNavigate } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

type PropsType = {
	asyncRoutes: RouteType[],
	permission_ids: string
}

const NavMenu: React.FC<PropsType> = ({ asyncRoutes, permission_ids }) => {
	const navigate = useNavigate()
	const location = useLocation()
	const generatorMenu = (routes: RouteType[], permission_ids: string): any => {
		return routes.filter(v => {
			return permission_ids.includes((v.meta?.permission_id) as string)
		})
			.map(v => {
				return {
					key: v.path,
					label: v.meta?.title,
					children: v.children && generatorMenu(v.children, permission_ids)
				}
			})
	}

	const items: MenuItem[] = generatorMenu(asyncRoutes, permission_ids)

	return (
		<Menu onClick={({ key }) => { navigate(key) }} theme="dark" defaultSelectedKeys={[location.pathname]} mode="inline" items={items} />
	)
}

export default NavMenu